<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 libphonenumber-js 验证和格式化电话号码</title>
    <style>
        .error {
            color: red;
            display: none;
        }
        .formatted-number {
            color: green;
            font-weight: bold;
        }
    </style>

</head>
<body>
<h1>使用 libphonenumber-js 验证和格式化电话号码</h1>
<form id="phone-form">
    <label for="country">选择国家:</label>
    <select id="country" name="country" required>
        <option value="CN">中国</option>
        <option value="US">美国</option>
        <!-- 添加更多国家选项 -->
    </select>
    <br><br>
    <label for="phone">电话号码:</label>
    <input type="text" id="phone" name="phone" required>
    <br><br>
    <button type="button" onclick="validateAndFormatPhoneNumber()">验证并格式化</button>
</form>
<p id="error-message" class="error">电话号码格式不正确，请重新输入。</p>
<p id="formatted-number" class="formatted-number"></p>

<script>
    function validateAndFormatPhoneNumber() {
        // 获取选中的国家和电话号码
        const countryCode = document.getElementById('country').value;
        const phoneInput = document.getElementById('phone').value;
        const errorMessage = document.getElementById('error-message');
        const formattedNumber = document.getElementById('formatted-number');

        // 使用 libphonenumber-js 验证和格式化电话号码
        try {
            const phoneNumber = libphonenumber.parsePhoneNumberFromString(phoneInput, countryCode);
            if (phoneNumber.isValid()) {
                // 电话号码有效，进行格式化
                formattedNumber.textContent = phoneNumber.formatInternational();
                errorMessage.style.display = 'none'; // 隐藏错误消息
                formattedNumber.style.display = 'block'; // 显示格式化号码
            } else {
                throw new Error('电话号码无效');
            }
        } catch (e) {
            // 电话号码无效，显示错误消息
            errorMessage.style.display = 'block';
            formattedNumber.style.display = 'none'; // 隐藏格式化号码
        }
    }
</script>
</body>
</html>
